<template>
	<div>
		<div style="display: flex;border: solid 1px gray">
			<input :value="text" @focus="handleFocus" @blur="handleLostInput" type="text" :placeholder="placeholder" :disabled="!searchable" @input="handleInput"></input>
			<view v-if="selectedText" @click="onClear" style="padding: 0 10rpx;background-color: #C0C0C0;">×</view>
		</div>
		
		<div v-show="showingList" class="popup">
			<div class="items" v-if="hasItems" :style="{maxHeight: `${showItemsNumbers*2}em`}">
			<slot>
				<div @click="handleSelect(item, idx)" class="select-item" v-for="(item, idx) in items" :key="key(item, idx)"
					:class="selectedIndex==idx?'highlighted':''">
					{{(item[labelField] || item[valueField] || item + 1) + suffix}}
				</div>
			</slot>
			</div>
			<center v-else class="gst">
				{{noItemsText}}
			</center>
		</div>
		
	</div>
</template>

<script>
	
	export default {
		name: 'xfl-select',
		props: {
			suffix:{						// 数字类型的后缀
				type:String,
				default:''
			},
			labelField: {
				type: String,
				default: 'label'
			},
			valueField:{
				type: String,
				default: 'value'
			},
			value: {							// 当前选中的索引项
				type: Number,
				default: -1,				// -1 表示不选择任何选项
			},
			items: {							// 列表清单({index: Number, label:String, value:String | Number | Symbol, disabled: false, id: String | Symbol | Number})
				type: [Array, Number],				
				default(){
					return []
				}
			},
			searchable: {					// 是否可以搜索
				type: Boolean,
				default: true,
			},
			placeholder:{					// 占位符文本
				type: String,
				default: '',
			},
			mins:{								// 最少可以选择多少个
				type: Number,
				default: 0,
			},
			maxs:{							 // 最多可以选择多少个
				type:Number,
				default: 1,
			},
			noMatchesText:{			// 没有匹配到的文本
				type:String,
				default: '找不到匹配项',
			},
			noItemsText:{				// 没有数据项的时候的匹配文本
				type: String, 
				default: '没有数据'
			},
			highlightdClass:{		// 高亮项的类名
				type: String,
				default:''
			},
			showItemsNumbers:{	// 同时显示的项目数量
				type: Number,
				default: 5,
			},
			appendedIfNew:{			// 如果没有搜索到是否自动追加数据项
				type: Boolean,
				default: false
			},
			format:{						// 提供文本框的自定义过滤器方法
				type: Function,		
				default: null,
			},
			seperators:{				// 是否显示分割线
				type: Boolean,
				default: false,
			},
			sortable:{					// 是否可以排列顺序
				type: Boolean,	
				default: false,
			},
			itemClass:{					// 列表项的类
				type: String,
				default: '',
			}
		},
		
		data(){
			return {
				showingList: false,
				text:'',
				selectedIndex:-1,
			}
		},
		methods:{
			key(item, idx){
				return item[this.valueField] || item || idx
			},
			// 搜索框市区焦点的时候
			handleLostInput(){
				this.showingList = false
			},
			// 搜索框获得焦点的时候
			handleFocus(){			
				this.showingList = true
			},
			// 搜索文本框输入时
			handleInput(){
				
			},
			//选择下拉框的选项的时候
			handleSelect(item, idx){
				this.$emit('input', idx)
				this.selectedIndex = idx
				console.log(this.selectedIndex)
				this.text = this.selectedText
				this.showingList=false
			},
			// 清空选项的时候
			onClear(){
				this.$emit('clear')
				this.$emit('input', -1)
				this.text = ''
			}
		},
		filters:{
			
		},
		computed:{
			hasItems(){						// 是否有数据
			console.log(this.items)
				if(typeof(this.items)==='number'){
					return this.items > 0
				}else if(this.items instanceof Array){
					return this.items.length > 0
				}
			},
			selectedText(){													// 选中的文本值
				if(this.selectedIndex>=0){
					if(typeof(this.items)==='number'){
						return `${this.selectedIndex+1}${this.suffix}`
					}
					else return this.items[this.selectedIndex][this.labelField] || this.items[this.selectedIndex][this.valueField] || 
						this.items[this.selectedIndex].id || this.items[this.selectedIndex]
				}else return ''
			},
			selectedItem(){				// 选中的项目
				if(this.selectedIndex == -1){
					return null
				}else {
					return this.items[this.selectedIndex]
				}
			}
		},
	}
</script>

<style scoped>
	
	.popup{
			background-color: white;
		
			position: absolute;
			
			border: solid 1px gray;
			
			z-index: 9999999;
			
			min-width: 300rpx;
	}
	
	.gst{
		font-size: small;
		color: gray;
	}
	
	.items{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		
		align-items: stretch;
		
		overflow-y: scroll;
		scroll-behavior: smooth;
	}
	
	.items .select-item{
		line-height: 2em;
		padding: 0 20rpx;
		margin: 0;
	}
	
	.highlighted{
		background-color: #2E62E2;
		color: white;
	}

</style>
